<template>
<div class="group-menu">
    <slot></slot>
    <!-- <i class="zlstbd-icon-setting pointer setting" @click.stop="openMenu($event)"></i> -->
    <slot name="last"></slot>
    <div class="column-menu animate" v-show="open" :class="{'dropDown':open ,'dropUp':!open}">
        <div class="group" v-for="(item,pindex) in groupOptions" :key="pindex">
            <div class="column-group-item" v-for="(its ,index) in item.options" :key="index" @click="select(pindex,its)"
                :class="{'selected':(selectInfo[item.value]!=null &&selectInfo[item.value] ==its.value)}">
                {{its.label}}
            </div>
        </div>
    </div>
</div>

</template>

<script>
import util from 'util'
export default {
    name: 'column-menu',
    props: {
        value: {
            type: [Object]
        },
        groupOptions:{
            type:Array,
            default:function () {
                return []
            }
        },
    },
    data () {
        return {
            open:false,
            selectInfo:{},
            selectAll:{}
        }
    },
    methods:{
        init(){
            var _this =this ;
            document.addEventListener("click",function(){
                _this.open=false;
            })
            this.selectInfo =util.util.cloneObj(this.value)
            for(var i =0;i<this.groupOptions.length;i++){
                this.selectInfo[this.groupOptions[i].value]='';
            }
        },
        openMenu(ev){
            this.open=!this.open;
        },
        select(index,item){
            this.selectInfo[this.groupOptions[index].value]=item.value;
            this.selectInfo[this.groupOptions[index].value+'Name']=item.label;
            this.selectAll[this.groupOptions[index].value]=item;
            this.$emit('input', util.util.cloneObj(this.selectInfo));
            this.open=false;
        }
    },
    mounted(){
        this.init();
    }
}
</script>
<style lang="less">
.setting{
    padding-right: 20px;
}
</style>

